<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>角色管理</title>
    <style>
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        .animate-fadeIn {
            animation: fadeIn 0.5s ease-out;
        }
    </style>
</head>
<body>
<cms-layout layout="admin/layout/master">
    <div>
        <div class="mx-auto rounded-xl p-8 space-y-8 animate-fadeIn">
            <header class="border-b border-gray-200 pb-4">
                <h1 class="text-3xl font-bold text-gray-800">角色管理</h1>
            </header>

            <div class="space-y-6">
                <div class="flex flex-col md:flex-row md:items-center md:space-x-4">
                    <label class="w-full md:w-32 text-gray-700 font-medium mb-2 md:mb-0">
                        <span class="text-red-500">*</span> 角色名称
                    </label>
                    <input id="role_id" th:value="${roles.id}" type="hidden"/>
                    <input type="text" placeholder="角色名称" id="role_name"
                           th:value="${roles.name}"
                           class="flex-grow border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-200">
                </div>
            </div>

            <div class="space-y-8" id="system-permissions">
                <div class="bg-gradient-to-r from-blue-500 to-blue-600 p-4 rounded-lg text-white flex justify-between items-center shadow-md">
                    <span class="font-semibold">系统权限</span>
                    <div class="space-x-4">
                        <button class="hover:underline transition duration-200" onclick="systemSelectedAll(true)">选中所有
                        </button>
                        <button class="hover:underline transition duration-200" onclick="systemSelectedAll(false)">
                            取消选中
                        </button>
                    </div>
                </div>

                <div class="space-y-6">
                    <div class="bg-white rounded-lg shadow-sm p-6 hover:shadow-md transition duration-300"
                         th:each="permission : ${systemPermissions}" th:id="${permission.typeName}">
                        <div class="font-semibold text-lg mb-4 flex justify-between items-center">
                            <span class="text-gray-800" th:text="${permission.typeName}"></span>
                            <button class="text-sm text-blue-600 hover:text-blue-800 transition duration-200">[<span
                                    th:data-type_name="${permission.typeName}"
                                    onclick="systemItemSelectedAll(this,true)">全选</span>/<span
                                    th:data-type_name="${permission.typeName}"
                                    onclick="systemItemSelectedAll(this,false)">取消</span>]
                            </button>
                        </div>
                        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                            <label class="flex items-center space-x-2 cursor-pointer group"
                                   th:each="item : ${permission.permissionList}">
                                <input type="checkbox"
                                       th:value="${item.id}"
                                       th:checked="${item.isChecked}"
                                       class="rounded border-gray-300 text-blue-600 focus:ring-blue-500 transition duration-200">
                                <span class="group-hover:text-blue-600 transition duration-200"
                                      th:text="${item.name}"></span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="space-y-8" id="plugin-permissions"
                 th:if="${pluginsPermissions != null && pluginsPermissions.size() > 0}">
                <div class="bg-gradient-to-r from-blue-500 to-blue-600 p-4 rounded-lg text-white flex justify-between items-center shadow-md">
                    <span class="font-semibold">插件权限</span>
                    <div class="space-x-4">
                        <button class="hover:underline transition duration-200">选中所有</button>
                        <button class="hover:underline transition duration-200">取消选中</button>
                    </div>
                </div>

                <div class="space-y-6">
                    <div class="bg-white rounded-lg shadow-sm p-6 hover:shadow-md transition duration-300"
                         th:each="permission : ${pluginsPermissions}">
                        <div class="font-semibold text-lg mb-4 flex justify-between items-center">
                            <span class="text-gray-800" th:text="${permission.typeName}"></span>
                            <button class="text-sm text-blue-600 hover:text-blue-800 transition duration-200">[全选/取消]
                            </button>
                        </div>
                        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                            <label class="flex items-center space-x-2 cursor-pointer group"
                                   th:each="item : ${permission.permissionList}">
                                <input type="checkbox"
                                       th:value="${item.id}"
                                       th:checked="${item.isChecked}"
                                       class="rounded border-gray-300 text-blue-600 focus:ring-blue-500 transition duration-200">
                                <span class="group-hover:text-blue-600 transition duration-200"
                                      th:text="${item.name}"></span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-8 flex justify-end space-x-4">
                <button class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition duration-200">
                    取消
                </button>
                <button onclick="saveRole()"
                        class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition duration-200">
                    保存设置
                </button>
            </div>
        </div>
    </div>
</cms-layout>
</body>

<script>
    function systemSelectedAll(checked) {
        $("#system-permissions input[type='checkbox']").prop("checked", checked);
    }

    function systemItemSelectedAll(ele, checked) {
        let id = $(ele).attr("data-type_name");
        $("#" + id + " input[type='checkbox']").prop("checked", checked);
    }

    function saveRole() {
        let role_name = $("#role_name").val();
        if (role_name.trim() == '') {
            layer.msg("角色名称不能为空");
            return;
        }
        var selectedCheckboxes = [];
        $("#system-permissions input[type='checkbox']:checked").each(function () {
            selectedCheckboxes.push($(this).val());
        });
        $("#plugin-permissions input[type='checkbox']:checked").each(function () {
            selectedCheckboxes.push($(this).val());
        });
        console.log(selectedCheckboxes);
        selectedCheckboxes = JSON.stringify(selectedCheckboxes);
        let that = this;
        let role_id = $("#role_id").val();
        if (role_id > 0) {
            axios.put('/admin/roles/update/' + role_id, {
                role_name: role_name,
                permission_ids: selectedCheckboxes
            }).then(function (res) {
                res = res.data;
                if (res.code == 0) {
                    window.location.href = res.data.callback ? res.data.callback : "/admin/roles"
                } else {
                    layer.msg(res.msg);
                }
            }).catch(function (err) {
                layer.msg(err.msg);
            }).finally(function () {

            });
        } else {
            axios.post('/admin/roles/store', {
                role_name: role_name,
                permission_ids: selectedCheckboxes
            }).then(function (res) {
                res = res.data;
                if (res.code == 0) {
                    window.location.href = res.data.callback ? res.data.callback : "/admin/roles"
                } else {
                    layer.msg(res.msg);
                }
            }).catch(function (err) {
                layer.msg(err.msg);
            }).finally(function () {

            });
        }
    }
</script>

</html>